<template>
  <view class="life-items" @click="gotoPage">
    <image :src="`https://img.qumoyugo.com${props.option.pic}/300x300`" class="img-p"></image>
    <view class="right-b">
      <view class="title">
        {{props.option.title}} <img :src="showImg(props.option.conclusion)" class="yx-img" v-if="props.option.contentType === 1">
      </view>
      <view v-if="props.option.contentType === 0">
        <view class="dq-it" v-if="props.option.conclusionList.usable">
          <img src="https://img.qumoyugo.com/webimgbg/pets-science-icon-fill.png" class="yx-img">
          <view style="flex:1">
            {{props.option.conclusionList.usable}}
          </view>
        </view>
        <view class="dq-it" v-if="props.option.conclusionList.caution">
          <img src="https://img.qumoyugo.com/webimgbg/pets-science-icon-careful.png" class="yx-img">
          <view style="flex:1">
            {{props.option.conclusionList.caution}}
          </view>
        </view>
        <view class="dq-it" v-if="props.option.conclusionList.disabled">
          <img src="https://img.qumoyugo.com/webimgbg/pets-science-icon-ban.png" class="yx-img">
          <view style="flex:1">
            {{props.option.conclusionList.disabled}}
          </view>
        </view>
      </view>
      <view class="content u-line-3" v-else>
        {{props.option.descri}}
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  option: {
    type: Object,
    default: () => {}
  }
})
const showImg = () => {
  return ['https://img.qumoyugo.com/webimgbg/pets-science-icon-fill.png', 'https://img.qumoyugo.com/webimgbg/pets-science-icon-ban.png', 'https://img.qumoyugo.com/webimgbg/pets-science-icon-careful.png'][props.option.conclusion]
}
const gotoPage = () => {
  uni.navigateTo({
    url: '/science/lifeDetail?id=' + props.option.id
  })
}
</script>

<style scoped lang="scss">
.life-items{
  display: flex;
  font-size: 13px;
  color: #999999;
  line-height: 40rpx;
  font-weight: 300;
  .img-p{
    width: 180rpx;
    height: 180rpx;
    border-radius: 12rpx;
  }
  .right-b{
    flex: 1;
    padding-left: 20rpx;
  }
  .yx-img{
    height: 30rpx;
    width: 30rpx;
    margin-right: 10rpx;
  }
  .title{
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    line-height: 42rpx;
    margin: 6rpx 0;
  }
  .dq-it{
    display: flex;
    margin: 10rpx 0;
    line-height: 30rpx;
  }
}
</style>
